import global from "@/global"
import { RootState } from "@/store"
import { Module } from "vuex"
import { IDeviceControlActions, IDeviceControlGetter, IDeviceControlMutations, IDeviceControlState } from "./types"

const state: IDeviceControlState = {
    title: '摄像头控制',
    icon: 'direction',
    stopIcon: 'circle',
    hoverBgColor: global.darkTheme.linkActiveBgColor,
    btnDirection: {
        leftTop: { x: -1, y: 1, z: 0, speed: { x: 1.0, y: 1.0, z: 1.0 } },
        top: { x: 0, y: 1, z: 0, speed: { x: 0, y: 1.0, z: 0 } },
        rightTop: { x: 1, y: 1, z: 0, speed: { x: 1.0, y: 1.0, z: 1.0 } },
        left: { x: -1, y: 0, z: 0, speed: { x: -1.0, y: 0, z: 0 } },
        circle: { x: 0, y: 0, z: 0, speed: { x: 1.0, y: 1.0, z: 1.0 } },
        right: { x: 1, y: 0, z: 0, speed: { x: 1.0, y: 0, z: 0 } },
        leftBottom: { x: -1, y: -1, z: 0, speed: { x: 1.0, y: 1.0, z: 1.0 } },
        bottom: { x: 0, y: -1, z: 0, speed: { x: 0, y: -1.0, z: 0 } },
        rightBottom: { x: 1, y: -1, z: 0, speed: { x: 1.0, y: 1.0, z: 1.0 } },
    }
}

const actions: IDeviceControlActions = {

}

const mutations: IDeviceControlMutations = {
    _moveCamera(state: IDeviceControlState, { ws, direction }: { ws: WebSocket, direction: string }) {
        if (!ws || !direction) return
        const data = {
            type: 'move',
            direction,
            data: state.btnDirection[direction],
            method: direction === 'circle' ? 'absolute' : 'continuous'
        }
        ws.send(JSON.stringify(data))

        // 调整摄像头方向
        console.log(data);
    }
}
const getters: IDeviceControlGetter = {

}

export const deviceControl: Module<IDeviceControlState, RootState> = {
    namespaced: true,
    state,
    actions,
    mutations,
    getters
}
